<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="/x/zjabank/static/js/echarts.js"></script>
    <script type="text/javascript" src="/x/zjabank/static/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="/x/zjabank/static/widget/grid/map.js"></script>
    <script type="text/javascript" src="/x/zjabank/static/widget/grid/dlshouwen.grid.min.js"></script>
    <script type="text/javascript" src="/x/zjabank/static/widget/grid/i18n/zh-cn.js"></script>
    <!-- bootstrap -->
    <script type="text/javascript" src="/x/zjabank/static/widget/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/x/zjabank/static/widget/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="/x/zjabank/static/widget/grid/dlshouwen.grid.min.css"/>
   
    <!-- font-awesome -->
    <link rel="stylesheet" type="text/css" href="/x/zjabank/static/widget/fontAwesome/css/font-awesome.min.css" media="all"/>

</head>

<body>
    <div>
    <div id="echarts" style="width:1400px;height:350px;margin:0px auto;"></div>
    <div id="gridContainer" class="dlshouwen-grid-container"></div>
    <div id="gridToolBarContainer" class="dlshouwen-grid-toolbar-container"></div>
    </div>
    <script type="text/javascript">
    //$('#main').css('height',$(window).height()-20+'px');
    //$('#main').css('width',$(window).width()-20+'px');
    // alert($(window).height());
    // alert($(window).width());
    
    var myChart = echarts.init(document.getElementById('echarts'));
    $.ajax({
        url:'/x/zjabank/rst/resend?controller=charts@totalReportData',
        type:'GET',
        dataType:'json',
        cache:false
    }).done(function(data){
        var data1 = new Array();
        var data2 = new Array();
        var map1 = getMap();
        var map2 = getMap();
        var map3 = getMap();
        var a = []; 
		//返回的map按照key的值排序
		$.each(data, function(key, val) { a[a.length] = key;  });  
		a.sort();
        $.each(a, function(i, key) {  
   		 var b = new Array();
        	 var b = data[key];
        	data1.push(key);
        	data2.push({
                name:key,
                value:b[0]  
   		}); 
          map1.put(key,b[0]);
          map2.put(key,b[1]);
          map3.put(key,b[2]);
        });
        if(data1[0]=='没有数据'){
        	alert("没有相关数据，无法显示相关图表！");
        }else{
        console.log(data1);
        console.log(data2);
        var option = {
            title: {
                text: '',
                subtext: '',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)",
                formatter: function (params, ticket,  callback) {
            	  //var res = params[0].value + '<br/>';
            	  var res = a+':<br/>';
            	  res=res+'数量:'+ map1.get(a) +'('+map3.get(a)+'%);总金额：'+map2.get(a)+ '(万元)<br/>';
            	  //res=res+'数量'+ params[1].value +';总金额：'+map2.get(params[0].name)+ '(万元)<br/>'; 
                  return res; 
                }
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: data1
            },
            series: [{
                name: '',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: data2,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };
        myChart.setOption(option);
        }
    });
  //列表
    var area = {330000:'浙江省',330100:'杭州市',330102:'上城区',330103:'下城区',330104:'江干区',330105:'拱墅区',330106:'西湖区',330108:'滨江区',330109:'萧山区',330110:'余杭区',330122:'桐庐县',330127:'淳安县',330182:'建德市',330183:'富阳区',330185:'临安市',330200:'宁波市',330203:'海曙区',330204:'江东区',330205:'江北区',330206:'北仑区',330211:'镇海区',330212:'鄞州区',330225:'象山县',330226:'宁海县',330281:'余姚市',330282:'慈溪市',330283:'奉化市',330300:'温州市',330302:'鹿城区',330303:'龙湾区',330304:'瓯海区',330322:'洞头区',330324:'永嘉县',330326:'平阳县',330327:'苍南县',330328:'文成县',330329:'泰顺县',330381:'瑞安市',330382:'乐清市',330400:'嘉兴市',330402:'南湖区',330411:'秀洲区',330421:'嘉善县',330424:'海盐县',330481:'海宁市',330482:'平湖市',330483:'桐乡市',330500:'湖州市',330502:'吴兴区',330503:'南浔区',330521:'德清县',330522:'长兴县',330523:'安吉县',330600:'绍兴市',330602:'越城区',330621:'绍兴县',330624:'新昌县',330681:'诸暨市',330682:'上虞市',330683:'嵊州市',330700:'金华市',330702:'婺城区',330703:'金东区',330723:'武义县',330726:'浦江县',330727:'磐安县',330781:'兰溪市',330782:'义乌市',330783:'东阳市',330784:'永康市',330800:'衢州市',330802:'柯城区',330821:'衢江区',330822:'常山县',330824:'开化县',330825:'龙游县',330881:'江山市',330900:'舟山市',330902:'定海区',330903:'普陀区',330921:'岱山县',330922:'嵊泗县',331000:'台州市',331002:'椒江区',331003:'黄岩区',331004:'路桥区',331021:'玉环县',331022:'三门县',331023:'天台县',331024:'仙居县',331081:'温岭市',331082:'临海市',331100:'丽水市',331102:'莲都区',331121:'青田县',331122:'缙云县',331123:'遂昌县',331124:'松阳县',331125:'云和县',331126:'庆元县',331127:'景宁畲族自治县',331181:'龙泉市'};
    var gridColumns = [{
        id: 'area_code',
        title: '地区',
        type: 'string',
        codeTable: area,
        columnClass: 'text-center',
        hideType: 'sm|xs',
        fastQuery: true,
        fastQueryType: 'eq'
    }, {
        id: 'count',
        title: '累计报送数量',
        type: 'number',
        format: '#,###',
        columnClass: 'text-center',
        hideType: 'xs',
        fastQuery: true,
        fastQueryType: 'eq'
    },{
        id: 'bili',
        title: '占比(%)',
        type: 'number',
        format: '#,###.00',
        columnClass: 'text-center',
        fastQuery: true,
        fastQueryType: 'eq'
    },{
        id: 'jine',
        title: '累计融资金额(万元)',
        type: 'number',
        format: '#,###.00',
        columnClass: 'text-center',
        fastQuery: true,
        fastQueryType: 'eq'
    },{
        id: 'jinebili',
        title: '累计融资金额占比(%)',
        type: 'number',
        format: '#,###.00',
        columnClass: 'text-center',
        fastQuery: true,
        fastQueryType: 'eq'
    }];
    var gridOption = {
        lang: 'zh-cn',
        ajaxLoad: true,
        loadURL: '/x/zjabank/rst/resend?controller=charts@lgshuju',
        exportFileName: '用户列表',
        columns: gridColumns,
        gridContainer: 'gridContainer',
        toolbarContainer: 'gridToolBarContainer',
        tools: '',
        pageSize: 10,
        pageSizeLimit: [10, 20, 50]
    };
    var grid = $.fn.dlshouwen.grid.init(gridOption);
    $(function () {
        grid.load();
    });
    </script>
</body>

</html>
